<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:92:"F:\phpstudy2014\WWW\the_beginning_of_taste\public/../application/index\view\index\login.html";i:1554690991;}*/ ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="expires" content="Thu,01 Jan 1970 00:00:01 GMT">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <!--<meta http-equiv="Content-Security-Policy" content="default-src 'self';font-src 'self' data: https://fonts.gstatic.com https://fonts.googleapis.com/;style-src 'self' 'unsafe-inline'; media-src *;script-src 'self' http://api.map.baidu.com ;">-->
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link href="__IMG__/logo.png" rel="shortcut icon" type="image/x-icon">
    <title>花椒-辣椒-香料-调味品-附城--成都味之初农产品有限公司</title>
    <base target="_self">
    <meta name="keywords" content="成都调味品批发交易贸易，花椒，辣椒，香料，成都调味品">
    <meta name="description" content="成都味之初农产品有限公司,专注于花椒，辣椒，香料等调味品批发贸易">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="__LIB__/layui/css/layui.css">
    <link rel="stylesheet" href="__CSS__/bootstrap.min.css">
    <link rel="stylesheet" href="__CSS__/reset.css">
    <link rel="stylesheet" href="__CSS__/common.css">
    <link rel="stylesheet" href="__CSS__/slide-unlock.css">
    <link rel="stylesheet" href="__CSS__/log-reg.css">
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?68cca1e88d91513304d45edd3b72a6ba";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <style>
        #label{
            background: url("__IMG__/slider_left.png") 50% no-repeat #fff;
            background-size: 15px 11px;
            height: 100%;
        }
        #labelTip{
            background: -webkit-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            -webkit-animation: slidetounlock 3s infinite;
            -webkit-text-size-adjust: none;
        }
        #slider {
            width: 350px;
            margin: 20px auto;
        }
        .login-forbidden-shake{
            animation: shake-vertical 0.5s ;
        }
        @-webkit-keyframes slidetounlock {
            0% {
                background-position: -200px 0
            }

            100% {
                background-position: 200px 0
            }
        }
        @keyframes shake-vertical {
            2% {
                transform: translate(0, -3px) rotate(0); }
            4% {
                transform: translate(0, -13px) rotate(0); }
            6% {
                transform: translate(0, 1px) rotate(0); }
            8% {
                transform: translate(0, -5px) rotate(0); }
            10% {
                transform: translate(0, 1px) rotate(0); }
            12% {
                transform: translate(0, -1px) rotate(0); }
            14% {
                transform: translate(0, -6px) rotate(0); }
            16% {
                transform: translate(0, 0px) rotate(0); }
            18% {
                transform: translate(0, 0px) rotate(0); }
            20% {
                transform: translate(0, 2px) rotate(0); }
            22% {
                transform: translate(0, 15px) rotate(0); }
            24% {
                transform: translate(0, 5px) rotate(0); }
            26% {
                transform: translate(0, 3px) rotate(0); }
            28% {
                transform: translate(0, 3px) rotate(0); }
            30% {
                transform: translate(0, 5px) rotate(0); }
            32% {
                transform: translate(0, 5px) rotate(0); }
            34% {
                transform: translate(0, -6px) rotate(0); }
            36% {
                transform: translate(0, 6px) rotate(0); }
            38% {
                transform: translate(0, -15px) rotate(0); }
            40% {
                transform: translate(0, 6px) rotate(0); }
            42% {
                transform: translate(0, 3px) rotate(0); }
            44% {
                transform: translate(0, 3px) rotate(0); }
            46% {
                transform: translate(0, 6px) rotate(0); }
            48% {
                transform: translate(0, -9px) rotate(0); }
            50% {
                transform: translate(0, 7px) rotate(0); }
            52% {
                transform: translate(0, 9px) rotate(0); }
            54% {
                transform: translate(0, 3px) rotate(0); }
            56% {
                transform: translate(0, -1px) rotate(0); }
            58% {
                transform: translate(0, -2px) rotate(0); }
            60% {
                transform: translate(0, -6px) rotate(0); }
            62% {
                transform: translate(0, -5px) rotate(0); }
            64% {
                transform: translate(0, 4px) rotate(0); }
            66% {
                transform: translate(0, -4px) rotate(0); }
            68% {
                transform: translate(0, -2px) rotate(0); }
            70% {
                transform: translate(0, -8px) rotate(0); }
            72% {
                transform: translate(0, -6px) rotate(0); }
            74% {
                transform: translate(0, -4px) rotate(0); }
            76% {
                transform: translate(0, 0px) rotate(0); }
            78% {
                transform: translate(0, 7px) rotate(0); }
            80% {
                transform: translate(0, -6px) rotate(0); }
            82% {
                transform: translate(0, 15px) rotate(0); }
            84% {
                transform: translate(0, -4px) rotate(0); }
            86% {
                transform: translate(0, 13px) rotate(0); }
            88% {
                transform: translate(0, -1px) rotate(0); }
            90% {
                transform: translate(0, 1px) rotate(0); }
            92% {
                transform: translate(0, 9px) rotate(0); }
            94% {
                transform: translate(0, -4px) rotate(0); }
            96% {
                transform: translate(0, -8px) rotate(0); }
            98% {
                transform: translate(0, 4px) rotate(0); }
            0%, 100% {
                transform: translate(0, 0) rotate(0); }
        }

        @media  (max-width: 500px){
            #slider {
                width: 263px;
            }
        }
    </style>
</head>
<body>
   <div class="fucheng">
        <div class="fucheng-cont">
            <a href="http://cdweizhichu.com/">
                <img src="__IMG__/logo.png" alt="">
                <span>附城</span>
            </a>
        </div>
   </div>
   <div class="form-part">
       <div class="title">用户登录</div>

       <div class="form-row">
           <img src="__IMG__/user.png" alt="">
           <input type="text" placeholder="手机号" name="phone" id="phone">

       </div>

       <div class="form-row">
           <img src="__IMG__/lock.png" alt="">
           <input type="password" placeholder="密码" name="pwd" id="pwd" minlength="6" maxlength="10">

           <span class="tips"></span>
       </div>

       <div id="slider">
           <div id="slider_bg"></div>
           <span id="label" class=""></span> <span id="labelTip" style="margin-left: 15px;">请按住滑块，拖动到最右边</span>
       </div>

       <div class="forget_pwd"><a href="<?php echo url('index/user_pwd_update'); ?>">忘记密码？</a></div>
       <div class="err-info"></div>

       <div class="bot-info user-option">
           <div class="u_choose user-log">登录</div>
           <div class="u_choose user-reg"><a href="<?php echo url('index/register'); ?>">注册</a></div>
       </div>
   </div>
</body>
<script src="__JS__/jQuery-1.11.1.min.js"></script>
<script src="__LIB__/layui/layui.js"></script>
<script src="__JS__/bootstrap.min.js"></script>
<script src="__JS__/jquery.slideunlock.js"></script>
<script>
    (function(){
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>
<script>
    $(function () {
        layui.use('layer', function() { //独立版的layer无需执行这一句
            var layer = layui.layer; //独立版的layer无需执行这一句
        })

        $('.form-row input').on('focus',function () {
            $(this).parent().css({borderColor: '#F6BB6D'})
        }).on('blur',function () {
            $(this).parent().css({borderColor: '#E3E7ED'})
        })

        $('#phone').css({paddingLeft:'0'})

        var code = 'error'
        var touchState = false
        var slider = new SliderUnlock("#slider",{
            successLabelTip : "验证通过"
        },function(){ //验证成功，执行...
            code = 'ok'
            touchState = true
            $('#label').css({background : 'url("__IMG__/imgSlider_Ok.png")  50% no-repeat #fff'})
            $('#labelTip').css({marginLeft: '-15px'})
            $('.user-log').css({background: '#F6BB6D'})
            $('#slider').css({border: '1px solid #dae2d0'})
            $('.err-info').html('')
            //1s后跳转
            // window.location.href = '<?php echo url("","",true,false);?>'
        },function () {
            touchState = false

        });
        slider.init();

        $('.user-log').on('click', function () {
            if(!touchState || code === 'error') {
                $('.err-info').html('请滑动滑块')
                $('#label').addClass('login-forbidden-shake')
                $('#slider').css({border: '1px solid red'})
                return
            }
            if(!$('#phone').val() && !$('#pwd').val()) {
                $('.err-info').html('请输入账户密码')
            }else if(!$('#phone').val()) {
                $('.err-info').html('请输入账户')
            }else if(!$('#pwd').val()) {
                $('.err-info').html('请输入密码')
            }else {
                $('.err-info').html('')
            }
            var errCount = 0
            $('.err-info').each(function (i,v) {
                if(v.innerText) {
                    errCount++
                }
            })
            if(errCount > 0) return
            if(code !== 'ok') {
                return
            }

            var postNeed
            if(touchState) {
                postNeed = {
                    phone: $('#phone').val(),
                    password : $('#pwd').val(),
                    token: "<?php echo \think\Session::get('token'); ?>"
                }
            }else {
                postNeed = {
                    phone: $('#phone').val(),
                    password : $('#pwd').val()
                }
            }
            $.post('/index/login/index',postNeed,function (res) {
                if(res.code == 1) {
                    window.location.href = 'index.html'
                }else if(res.msg == '滑块超时') {
                    layer.msg('操作超时',{icon:3,time: 1000})
                    slider.init();
                }else {
                    $('.err-info').html('账户或密码错误')

                }
            },'json')
        })
    })

</script>

</html>